import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { NavBar, Icon } from 'antd-mobile';
import { Table } from 'antd';
import KPITree from '../../component/kpi_tree/kpiTree';

import CaseStore from '../../stores/CaseStore';
import { RouterStore } from 'mobx-react-router';

import './KPIDetails.scss';

interface KPIDetailsProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

const KPIPreColumns = [
    {
        dataIndex: 'title',
        key: 'title',
        width: 90,
        render: (text: string, record: string, index: number) => {
            return <div className="table-font">{text + ':'}</div>;
        }
    },
    {
        dataIndex: 'info',
        key: 'info',
        render: (text: string, record: string, index: number) => {
            return <div className="table-info">{'  ' + text}</div>;
        }
    }
];

@inject('caseStore', 'routingStore')
@observer
export default class KPIDetails extends Component<KPIDetailsProps> {
    componentWillMount() {
        const { caseStore } = this.props;
        caseStore.getKPIPreview();
        caseStore.getBasicKPI();
        caseStore.getExtraKPI();
    }
    render() {
        const { caseStore, routingStore } = this.props;
        const title = caseStore.CaseListCategory;
        const kpiPreview = caseStore.KPIPreview;
        const basicKPI = caseStore.BasicKPI;
        const extraKPI = caseStore.ExtraKPI;
        return (
            <div className="page-box">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                    className="nav-box"
                >
                    {title}
                </NavBar>
                <div className="scroll-box">
                    <Table
                        dataSource={kpiPreview}
                        columns={KPIPreColumns}
                        bordered={true}
                        pagination={false}
                        showHeader={false}
                        className="kpi-table"
                    />

                    < KPITree
                        kpiDataList={basicKPI}
                    />
                    < KPITree
                        kpiDataList={extraKPI}
                    />
                </div>

            </div>
        );
    }
}